import React, { useState } from 'react';
import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { Button, ConfigProvider,theme as antdTheme} from 'antd';
import { NavLink, Outlet } from 'react-router-dom';
import { homeRoutes } from '../../router';
const { Header, Content, Footer, Sider } = Layout;
function getItem(label, key, icon, children) {
    return {
        key,
        icon,
        children,
        label,
    };
}
// const items = [
//   getItem('Option 1', '1', <PieChartOutlined />),
//   getItem('Option 2', '2', <DesktopOutlined />),
//   getItem('User', 'sub1', <UserOutlined />, [
//     getItem('Tom', '3'),
//     getItem('Bill', '4'),
//     getItem('Alex', '5'),
//   ]),
//   getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
//   getItem('Files', '9', <FileOutlined />),
// ];
const App = () => {
    const randHome = (arr) => {
        let items = []
        arr && arr.forEach((item) => {
            if (item.children) {
                items.push(getItem(<NavLink to={item.path}>{item.title}</NavLink>, item.path, <PieChartOutlined />,
                    randHome(item.children)
                ))
            }
            else {
                items.push(getItem(<NavLink to={item.path}>{item.title}</NavLink>, item.path, <PieChartOutlined />))
            }
        })
        return items
    }
    const items = randHome(homeRoutes)
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();
    const [thy,setThy]=useState("light")
    return (
        <ConfigProvider
    theme={{
      // 1. 单独使用暗色算法
      algorithm:thy==="dark" ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm
    }}
  >
     <Layout style={{ minHeight: '100vh' }}>
            <Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
                <div className="demo-logo-vertical" />
                <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
            </Sider>
            <Layout>
                <Header style={{ padding: 0, background: colorBgContainer }}>
                    用户名:{localStorage.getItem("username")}
                    <img src={localStorage.getItem("token")} alt="" style={{width:"50px", height:"50px"}}/>
                    <Button onClick={()=>setThy(thy==="dark" ? "light" : "dark")} type="primary" style={{float:"right",marginTop:"20px"}}>主题切换</Button>
                </Header>
                <Content style={{ margin: '0 16px' }}>
                    <Breadcrumb style={{ margin: '16px 0' }}>
                        <Breadcrumb.Item>User</Breadcrumb.Item>
                        <Breadcrumb.Item>Bill</Breadcrumb.Item>
                    </Breadcrumb>
                    <div
                        style={{
                            padding: 24,
                            minHeight: 360,
                            background: colorBgContainer,
                            borderRadius: borderRadiusLG,
                        }}
                    >
                        <Outlet></Outlet>
                    </div>
                </Content>
                <Footer style={{ textAlign: 'center' }}>
                    Ant Design ©{new Date().getFullYear()} Created by Ant UED
                </Footer>
            </Layout>
        </Layout>
  </ConfigProvider>
    );
};
export default App;